<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>

  <title>仪表盘的实现</title>
</head>

<body>
  <!-- 
    仪表盘图
    主要用在进度把控以及数据范围的检测
   -->
  <!-- 步骤
    准备数据，设置给series下的data
    data:[{value:97}]
    图表类型
    在series下设置type:gauge
  -->

  <div style="width: 400px;height: 400px;"></div>
  <script>
    var mChart = echarts.init(document.querySelector('div'));
    var option = {
      series: [{
        type: 'gauge',
        data: [{
          value: 97,
          itemStyle: {
            // 指针的样式
            color: 'red' //指针的颜色
          }
        }],
        // 控制最大值最小值也就是从哪里开始到哪里结束(范围)
        min: 50
      }]
    }
    mChart.setOption(option)
  </script>
</body>

</html>